<template>
  <div class="main">
    <div class="title">請求書作成</div>
    <div class="tag-btn">
      <el-button :type="setTagIndex == 1 ? 'primary' : ''" @click="setTagClick(1)">記載項目</el-button>
      <el-button :type="setTagIndex == 2 ? 'primary' : ''" @click="setTagClick(2)">詳細設定</el-button>
      <el-button :type="setTagIndex == 3 ? 'primary' : ''" @click="setTagClick(3)">テンプレート切り替え</el-button>
    </div>
    <div class="main-content">
      <div class="main-left">
        <el-form ref="form" label-position="top" :model="form" label-width="150px">
          <div v-if="setTagIndex == 1">
            <el-row :gutter="20">
              <el-col :span="16">
                <div>
                  <el-form-item label="取引先" :label-width="formLabelWidth" prop="client_id">
                    <el-select v-model="form.client_id" placeholder="取引先名を入力してください" style="width: 70%"
                      @visible-change="clientSelect">
                      <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <el-select v-model="form.subtitle" style="width: 30%" @change="subtitleSelect">
                      <el-option label="御中" :value="1"></el-option>
                      <el-option label="様" :value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <div class="client-add">
                    <el-button @click="clientAdd" size="small">取引先追加</el-button>
                  </div>
                  <el-form-item label="取引先詳細" :label-width="formLabelWidth" prop="client_content"
                    style="margin-top: 15px;">
                    <el-input type="textarea" :rows="3" v-model="form.client_content" autocomplete="off"
                      placeholder="取引先詳細"></el-input>
                  </el-form-item>
                  <el-form-item label="件名" :label-width="formLabelWidth" prop="file_name">
                    <el-input v-model="form.file_name" autocomplete="off" placeholder="件名"></el-input>
                  </el-form-item>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item label="繰り越し額" :label-width="formLabelWidth" prop="jz_money">
                        <el-input v-model="form.jz_money" autocomplete="off" @blur="calculateMoney"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="ご請求金額" :label-width="formLabelWidth">
                        0
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="8">
                <el-form-item label="請求書番号" :label-width="formLabelWidth" prop="numbers">
                  <el-input v-model="form.numbers" autocomplete="off" placeholder="請求書番号"></el-input>
                </el-form-item>
                <el-form-item label="請求日" :label-width="formLabelWidth" prop="bill_date">
                  <el-date-picker v-model="form.bill_date" type="date" value-format="YYYY-MM-DD" style="width: 100%"
                    placeholder="納品日">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="支払い期限" :label-width="formLabelWidth" prop="pay_date">
                  <el-date-picker v-model="form.pay_date" type="date" value-format="YYYY-MM-DD" style="width: 100%"
                    placeholder="支払い期限">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="lines"></div>
            <div class="product">
              <div class="pro-title">明細</div>
              <el-table :data="form.details" border style="width: 100%">
                <el-table-column prop="delivery_date" label="納品日" min-width="100">
                  <template #default="scope">
                    <el-date-picker v-model="scope.row.delivery_date" type="date" value-format="YYYY-MM-DD"
                      style="width: 100%" placeholder="納品日">
                    </el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column prop="product_id" label="品目" min-width="100">
                  <template #default="scope">
                    <el-select v-model="scope.row.product_id" filterable allow-create placeholder="品目"
                      default-first-option :reserve-keyword="false"
                      @change="productSelect(scope.row, scope.row.$index)">
                      <el-option v-for="item in proList" :key="item.value" :label="item.title" :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="単価" width="80">
                  <template #default="scope">
                    <el-input type="text" v-model="scope.row.price" @blur="calculateMoney"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="nums" label="数量" width="80">
                  <template #default="scope">
                    <el-input type="text" v-model="scope.row.nums" @blur="calculateMoney"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="year" label="単位/年" width="80">
                  <template #default="scope">
                    <el-input v-model="scope.row.year"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="tax" label="税率" width="100">
                  <template #default="scope">
                    <el-select v-model="scope.row.tax" filterable placeholder="税率"
                      @change="taxSelect(scope.row, scope.$index)">
                      <el-option label="10%" :value="1"></el-option>
                      <el-option label="8%(軽減税率)" :value="2"></el-option>
                      <el-option label="8%" :value="3"></el-option>
                      <el-option label="5%" :value="4"></el-option>
                      <el-option label="免税" :value="5"></el-option>
                      <el-option label="非課税" :value="6"></el-option>
                      <el-option label="不課税" :value="7"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="納品書番号" width="100">
                  <template #default="scope">
                    <el-icon @click="deliveryNoClick(scope.row, scope.$index)">
                      <EditPen style="width: 1em; height: 1em" />
                    </el-icon>
                  </template>
                </el-table-column>
                <el-table-column label="詳細" width="60">
                  <template #default="scope">
                    <el-icon @click="contentClick(scope.row, scope.$index)">
                      <EditPen />
                    </el-icon>
                  </template>
                </el-table-column>
                <el-table-column label="削除" width="60">
                  <template #default="scope">
                    <el-icon @click="tableDel(scope.$index)">
                      <DeleteFilled />
                    </el-icon>
                  </template>
                </el-table-column>
              </el-table>
              <div class="table-add">
                <el-button @click="tabelAdd">行を追加</el-button>
              </div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="振込先" :label-width="formLabelWidth" prop="client_id">
                    <el-select v-model="form.account_id" placeholder="選択してください" @visible-change="accountSelect">
                      <el-option v-for="item in accountList" :key="item.id" :label="item.title" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="" :label-width="formLabelWidth" prop="account_content">
                    <el-input type="textarea" :rows="4" v-model="form.account_content" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="備考" :label-width="formLabelWidth" prop="meno">
                    <el-input type="textarea" :rows="4" v-model="form.meno" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="title">
                請求書を管理
                <span style="font-size: 12px"> (請求書には印刷されません)</span>
              </div>
              <div style="background: #f7f7f7; padding: 15px">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="タグ" :label-width="formLabelWidth" prop="tags">
                      <el-select v-model="form.tags" placeholder="選択してください">
                        <el-option v-for="item in tagsList" :key="item.id" :label="item.title" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="メモ" :label-width="formLabelWidth" prop="notes">
                      <el-input :rows="4" v-model="form.notes" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="padding-left: 10px">
                  売上計上日 2025/7/31
                </el-row>
              </div>
              <div class="save-btn">
                <el-button type="primary" @click="addClick" :loading="loading">保存</el-button>
                <el-button type="primary" @click="printClick" :loading="loadingFlag">印刷</el-button>
              </div>
            </div>
          </div>
          <div v-else-if="setTagIndex == 2">
            <div style="padding: 10px 0; border-bottom: 1px solid #d4d8dd">
              「詳細設定」は、現在作成中の請求書のみに適用されます。サービス全体に関わる設定は、「帳票設定」から行ってください。
            </div>
            <div class="items">
              <div class="items-left">売上計上日</div>
              <div class="items-right">
                <el-date-picker v-model="form.sets.salescalc_date" type="date" value-format="YYYY-MM-DD"
                  style="width: 100%" placeholder="売上計上日">
                </el-date-picker>
              </div>
            </div>
            <div style="
                padding: 10px 0;
                border-bottom: 1px solid #d4d8dd;
                font-size: 16px;
                font-weight: bold;
              ">
              表示の設定
            </div>
            <div class="items">
              <div class="items-left">帳票名</div>
              <div class="items-right">
                <el-input v-model="form.sets.title" autocomplete="off" placeholder="帳票名"></el-input>
              </div>
            </div>
            <div class="items">
              <div class="items-left">ロゴ</div>
              <div class="items-right">
                <el-checkbox v-model="form.sets.flag">表示する</el-checkbox>
              </div>
            </div>
            <div class="items">
              <div class="items-left">印影</div>
              <div class="items-right">
                <el-checkbox v-model="form.sets.print">表示する</el-checkbox>
              </div>
            </div>
            <div class="items">
              <div class="items-left">請求日</div>
              <div class="items-right">
                <el-checkbox v-model="form.sets.bill_date">表示する</el-checkbox>
              </div>
            </div>
            <div class="items">
              <div class="items-left">支払い期限</div>
              <div class="items-right">
                <el-checkbox v-model="form.sets.pay_date">表示する</el-checkbox>
              </div>
            </div>
            <div class="items">
              <div class="items-left">単位</div>
              <div class="items-right">
                <el-checkbox v-model="form.sets.units">表示する</el-checkbox>
              </div>
            </div>
            <div class="items">
              <div class="items-left">納品日</div>
              <div class="items-right">
                <el-checkbox v-model="form.sets.delivery_date">表示する</el-checkbox>
              </div>
            </div>
            <div class="items">
              <div class="items-left">納品書番号</div>
              <div class="items-right">
                <el-checkbox v-model="form.sets.delivery_no">表示する</el-checkbox>
              </div>
            </div>
            <div style="
                padding: 10px 0;
                border-bottom: 1px solid #d4d8dd;
                font-size: 16px;
                font-weight: bold;
              ">
              消費税
            </div>
            <div class="items">
              <div class="items-left">消費税の表示方式</div>
              <div class="items-right">
                <el-radio-group v-model="form.sets.tax">
                  <el-radio :value="1">外税</el-radio>
                  <el-radio :value="2">内税</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="items">
              <div class="items-left">消費税が0円の場合</div>
              <div class="items-right">
                <el-checkbox v-model="form.sets.tax0" :label="1">消費税が0円の場合</el-checkbox>
              </div>
            </div>
          </div>
          <div v-else>
            <div>テンプレートを選択してください。</div>
            <div class="container___1Ytwi">
              <div v-for="item in tmpImgList" :key="item.id" class="thumbnailContainer"
                :class="form.sets.tmp_type == item.id ? 'active' : ''" @click="imgClick(item.id)">
                <img src="https://static.emenu.vip/2024/c1364b6a210c4c468dcb86cd75a879f6.png" alt=""
                  class="thumbnail___1Xmc4" />
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div class="main-right" ref="sheetDiv" id="sheetDiv">
        <div class="title" style="text-align: center; font-size: 28px; margin-top: 100px;">
          請求書
        </div>
        <div v-if="form.tmp_type == 1" style="margin-top: 30px;">
          <el-row :gutter="20">
            <el-col :span="12">
              <div>
                <span>{{ form.client_name }}</span>
                <span>{{ form.subtitle_name }}</span>
              </div>
              <div>
                <div style="white-space: pre-line;" v-html="form.client_content"></div>
              </div>
            </el-col>
            <el-col :span="12" style="position: relative">
              <div v-if="form.sets.flag">
                <el-image v-if="form.logo" style="width: 100px" :src="form.logo" fit="fill"></el-image>
              </div>
              <div style="position: absolute; left: 200px; top: 70px" v-if="form.sets.print">
                <el-image v-if="form.print_img" style="width: 50px" :src="form.print_img" fit="fill"></el-image>
              </div>
              <div style="margin-top: 10px">{{ store.title }}</div>
              <div>{{ store.reg_number }}</div>
              <div style="margin-top: 10px">{{ store.postal_code }}</div>
              <div>
                {{ store.addressA }}
              </div>
              <div>{{ store.addressB }}</div>
              <div>TEL: {{ store.phone }}</div>
              <div>FAX: {{ store.fax_no }}</div>
              <div style="margin-top: 10px">
                請求書番号： {{ form.numbers }}
              </div>
              <div v-if="form.sets.bill_date">
                請求日： {{ form.bill_date }}
              </div>
              <div v-if="form.sets.pay_date">
                お支払期限： {{ form.pay_date }}
              </div>
            </el-col>
          </el-row>
          <div style="margin-top: 20px">件名：{{ form.file_name }}</div>
          <div style="margin-top: 20px">
            <div style="display: inline-block; border: 1px solid #aaa">
              <div style="
                  border-bottom: 1px solid #aaa;
                  width: 100px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                ">
                繰越金額
              </div>
              <div style="
                  width: 100px;
                  height: 30px;
                  line-height: 30px;
                  text-align: right;
                  padding-right: 5px;
                ">
                {{ form.jz_money }}円
              </div>
            </div>
            <div style="
                display: inline-block;
                border: 1px solid #aaa;
                margin-left: 10px;
              ">
              <div style="
                  border-bottom: 1px solid #aaa;
                  width: 100px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                ">
                小計
              </div>
              <div style="
                  width: 100px;
                  height: 30px;
                  line-height: 30px;
                  text-align: right;
                  padding-right: 5px;
                ">
                {{ form.money }}円
              </div>
            </div>
            <div style="
                display: inline-block;
                border: 1px solid #aaa;
                margin-left: 10px;
              ">
              <div style="
                  border-bottom: 1px solid #aaa;
                  width: 100px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                ">
                消費税
              </div>
              <div style="
                  width: 100px;
                  height: 30px;
                  line-height: 30px;
                  text-align: right;
                  padding-right: 5px;
                ">
                {{ form.rate_money }}円
              </div>
            </div>
            <div style="
                display: inline-block;
                border: 1px solid #aaa;
                margin-left: 10px;
              ">
              <div style="
                  border-bottom: 1px solid #aaa;
                  width: 100px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                ">
                今回御買上金額
              </div>
              <div style="
                  width: 100px;
                  height: 30px;
                  line-height: 30px;
                  text-align: right;
                  padding-right: 5px;
                ">
                {{ form.all_money }}円
              </div>
            </div>
            <div style="float: right; border: 1px solid #aaa">
              <div style="
                  border-bottom: 1px solid #aaa;
                  width: 100px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                ">
                ご請求金額
              </div>
              <div style="
                  width: 100px;
                  height: 30px;
                  line-height: 30px;
                  text-align: right;
                  padding-right: 5px;
                ">
                {{ form.all_money }}円
              </div>
            </div>
          </div>
          <div style="margin-top: 20px">
            <el-table :data="form.details" style="width: 100%">
              <el-table-column v-if="form.sets.delivery_date" prop="delivery_date" label="納品日"
                width="100"></el-table-column>
              <el-table-column v-if="form.sets.delivery_no" prop="title" label="品目・納品書番号" width="150">
              </el-table-column>
              <el-table-column prop="price" label="単価"></el-table-column>
              <el-table-column prop="nums" label="数量"></el-table-column>
              <el-table-column v-if="form.sets.units" prop="year" label="単位"></el-table-column>
              <el-table-column prop="money" label="価格"></el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 20px">
            <div>振込先</div>
            <div style="
                border: 1px solid #aaa;
                min-height: 80px;
                padding: 5px;
                white-space: pre-line;
                margin-top: 10px;
              " v-html="form.account_content"></div>
            <div style="margin-top: 10px">備考</div>
            <div style="
                border: 1px solid #aaa;
                min-height: 80px;
                padding: 5px;
                white-space: pre-line;
                margin-top: 10px;
              ">
              {{ form.meno }}
            </div>
          </div>
        </div>
        <div v-else style="margin-top: 30px;">
          <el-row :gutter="20">
            <el-col :span="12">
              <div>
                <span>{{ form.client_content }}</span>
              </div>
              <div style="margin-top: 15px">
                <span>{{ form.client_name }}</span>
                <span> {{ form.subtitle_name }}</span>
              </div>
            </el-col>
            <el-col :span="12" style="position: relative">
              <div>
                <el-image v-if="form.logo" style="width: 100px" :src="form.logo" fit="fill"></el-image>
              </div>
              <div style="position: absolute; left: 200px; top: 70px">
                <el-image v-if="form.print_img" style="width: 50px" :src="form.print_img" fit="fill"></el-image>
              </div>
              <div style="text-align: right">{{ form.numbers }}</div>
              <div style="text-align: right">{{ form.bill_date }}</div>
              <div style="margin-top: 10px; font-size: 18px; margin-bottom: 10px">
                {{ store.title }}
              </div>
              <div>{{ store.postal_code }}</div>
              <div>{{ store.addressA }}−{{ store.addressB }}</div>
              <div>TEL: {{ store.phone }}</div>
              <div>登録番号:{{ store.fax_no }}</div>
            </el-col>
          </el-row>
          <div style="
              font-size: 28px;
              text-align: center;
              margin: 15px 0;
              font-weight: bold;
            ">
            請求書
          </div>
          <div style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 50px;
            ">
            <div>{{ form.file_name }}</div>
            <div>
              <div style="
                  border: 1px solid #aaa;
                  float: right;
                  width: 120px;
                  text-align: center;
                  line-height: 24px;
                ">
                <div style="border-bottom: 1px solid #aaa">ご請求額（円）</div>
                <div>¥{{ form.all_money }}</div>
              </div>
              <div style="
                  border: 1px solid #aaa;
                  float: right;
                  border-right: none;
                  width: 120px;
                  text-align: center;
                  line-height: 24px;
                ">
                <div style="border-bottom: 1px solid #aaa">消費税</div>
                <div>¥{{ form.rate_money }}</div>
              </div>
              <div style="
                  border: 1px solid #aaa;
                  float: right;
                  border-right: none;
                  width: 120px;
                  text-align: center;
                  line-height: 24px;
                ">
                <div style="border-bottom: 1px solid #aaa">合計金額</div>
                <div>¥{{ form.money }}</div>
              </div>
            </div>
          </div>
          <div style="margin-top: 15px">
            <el-table :data="form.details" style="width: 100%" border>
              <el-table-column v-if="form.sets.delivery_no" prop="title" label="品目・納品書番号">
              </el-table-column>
              <el-table-column prop="nums" label="導入数量（個）" width="150"></el-table-column>
              <el-table-column prop="price" label="単価" width="100"></el-table-column>
              <el-table-column prop="money" label="金額" width="100"></el-table-column>
            </el-table>
          </div>
          <div style="height: 35px">
            <div style="
                border: 1px solid #aaa;
                width: 350px;
                float: right;
                height: 35px;
                display: flex;
                align-items: center;
                text-align: center;
              ">
              <div style="
                  width: 250px;
                  border-right: 1px solid #aaa;
                  height: 35px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                ">
                税抜合計
              </div>
              <div style="width: 100px">¥{{ form.money }}</div>
            </div>
          </div>
          <div style="display: flex; align-items: center; margin-top: 20px">
            <div style="width: 100px">【お振込先】</div>
            <div>
              {{ form.account_content }}
            </div>
          </div>
          <div style="display: flex; justify-content: left; align-items: center">
            <div style="width: 100px">【お支払期限】</div>
            <div>{{ form.pay_date }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="納品書番号" width="30%" center v-model="dialogDeliveryNoVisible">
      <el-form :model="delivery_no">
        <el-form-item label="納品書番号" :label-width="formLabelWidth">
          <el-input v-model="delivery_no" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
        <el-button type="primary" @click="dialogDeliveryNoClick">変更を保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="詳細" width="30%" center v-model="dialogContentVisible">
      <el-form :model="delivery_no">
        <el-form-item label="詳細" :label-width="formLabelWidth">
          <el-input v-model="content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
        <el-button type="primary" @click="dialogContentClick">変更を保存</el-button>
      </div>
    </el-dialog>
    <!--客户添加-->
    <ClientAdd v-if="client_open_add" :open_add="client_open_add" @closeDialog="closeDialogFunc($event, 'add')">
    </ClientAdd>
  </div>
</template>

<script>
import billApi from "@/api/bill.js";
import billsettingApi from "@/api/billsetting.js";
import clientApi from "@/api/client.js";
import productApi from "@/api/product.js";
import bankaccountApi from "@/api/bankaccount.js";
import tagsApi from "@/api/tags.js";
import storeApi from "@/api/store.js";
import htmlToPdf from "@/components/utils/htmlToPdf";
import ClientAdd from "../../client/client/Add.vue";
import { ref } from 'vue'
export default {
  components: {
    /*编辑组件*/
    ClientAdd: ClientAdd,
  },
  data() {
    return {
      setTagIndex: 1,
      form: {
        type: 1,
        subtitle: 1,
        subtitle_name: "御中",
        file_name: "下記の通り、ご請求申し上げます。",
        logo: "",
        print_img: "",
        tmp_type: 1,
        jz_money: 0,
        money: 0,
        rate_money: 0,
        all_money: 0,
        details: [
          {
            delivery_date: "",
            product_id: "",
            title: "",
            price: "",
            year: "",
            nums: 1,
            tax: 1,
            tax_title: "10%",
            delivery_no: "",
            content: "",
          },
        ],
        sets: {
          salescalc_date: new Date(),
          title: "請求書",
          flag: true,
          print: true,
          bill_date: true,
          pay_date: true,
          units: true,
          delivery_date: true,
          delivery_no: true,
          tax: 1,
          tax0: true,
          tmp_type: 1,
        },
      },
      /*左边长度*/
      formLabelWidth: "120px",
      /*是否显示*/
      loading: false,
      detailIndex: 0,
      delivery_no: "",
      content: "",
      dialogDeliveryNoVisible: false,
      dialogContentVisible: false,
      clientList: [],
      proList: [],
      accountList: [],
      tagsList: [],
      tmpImgList: [],
      store: {},
      billsetting: {},
      loadingFlag: false,
      client_open_add: false,
    };
  },
  created() {
    this.getTmpImgList();
    this.getClientList();
    this.getProList();
    this.getAccountList();
    this.getTagsList();
    this.getBillSettingDetail();
    this.getStoreDetail();
  },
  methods: {
    /*获取设置详情*/
    getBillSettingDetail() {
      let self = this;
      billsettingApi
        .details({}, true)
        .then((res) => {
          this.form.logo = res.data.logo;
          this.form.print_img = res.data.print_img;
          this.billsetting = res.data;
          self.loading = false;
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*获取标签*/
    getStoreDetail() {
      let self = this;
      storeApi
        .details({}, true)
        .then((res) => {
          this.store = res.data;
          self.loading = false;
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*获取标签*/
    getTagsList() {
      let self = this;
      tagsApi
        .lists({}, true)
        .then((res) => {
          this.tagsList = res.data.list;
          self.loading = false;
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*获取汇款账号*/
    getAccountList() {
      let self = this;
      bankaccountApi
        .lists({}, true)
        .then((res) => {
          this.accountList = res.data.list;
          self.loading = false;
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*获取产品*/
    getProList() {
      let self = this;
      productApi
        .lists({}, true)
        .then((res) => {
          this.proList = res.data.list;
          self.loading = false;
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*获取客户*/
    getClientList() {
      let self = this;
      clientApi
        .lists({}, true)
        .then((res) => {
          this.clientList = res.data.list;
          self.loading = false;
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*获取模版样式*/
    getTmpImgList() {
      let self = this;
      billsettingApi
        .tmps({}, true)
        .then((res) => {
          this.tmpImgList = res.data;
          self.loading = false;
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*添加插件*/
    addClick() {
      let self = this;
      let params = this.form;
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          billApi
            .adds(params, true)
            .then((res) => {
              if (res.code == 1) {
                self.loading = false;
                ElMessage({
                  message: "追加成功",
                  type: "success",
                });
              } else {
                self.loading = false;
              }
            })
            .catch((error) => { });
        }
      });
    },
    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit("closeDialog", {
          type: "success",
          openDialog: false,
        });
      } else {
        this.$emit("closeDialog", {
          type: "error",
          openDialog: false,
        });
      }
    },
    /* 切换页面 */
    setTagClick(index) {
      this.setTagIndex = index;
    },
    // 图片切换
    imgClick(type) {
      this.form.sets.tmp_type = type;
      this.form.tmp_type = type;
    },
    // 客户选择
    clientSelect(visible) {
      if (!visible) {
        let client = {};
        for (var i in this.clientList) {
          if (this.clientList[i].id == this.form.client_id) {
            client = this.clientList[i];
          }
        }
        this.form.client_name = client.name;
        this.form.client_content = ''
        if (client.postal_code != '' && client.postal_code != null) {
          this.form.client_content = "〒" + client.postal_code
        }
        if (client.addressA != '' && client.addressA != null) {
          this.form.client_content +=  "\n" + "            " + client.addressA
        }
      }
    },
    // 账户选择
    accountSelect(visible) {
      if (!visible) {
        let account = {};
        for (var i in this.accountList) {
          if (this.accountList[i].id == this.form.account_id) {
            account = this.accountList[i];
          }
        }
        var typeTxt = ""
        if (account.type == 1) {
          typeTxt = "普通"
        } else if (account.type == 2) {
          typeTxt = "当座"
        } else {
          typeTxt = "その他"
        }
        if (account.id > 0) {
          this.form.account_content = ""
          if (account.bank_name != '' || account.bank_name != null || account.bank_name != undefined) {
            this.form.account_content += "銀行名：" + account.bank_name + "" + "\n"
          }
          if (account.branch_name != '' || account.branch_name != null || account.branch_name != undefined) {
            this.form.account_content += "支店名：" + account.branch_name + "" + "\n"
          }
          if (typeTxt != '' || typeTxt != null || typeTxt != undefined) {
            this.form.account_content += "口座種別：" + typeTxt + "" + "\n"
          }
          if (account.account != '' || account.account != null || account.account != undefined) {
            this.form.account_content += "口座番号：" + account.account + "" + "\n"
          }
          if (account.address != '' || account.address != null || account.address != undefined) {
            this.form.account_content += "振込先：" + account.address + "" + "\n"
          }
        }
      }
    },
    // 敬称选择
    subtitleSelect(data) {
      if (data == 1) {
        this.form.subtitle_name = "御中";
      } else {
        this.form.subtitle_name = "様";
      }
    },
    // 产品选择
    productSelect(data, index) {
      let is_exist = false
      for (var i in this.proList) {
        if (this.proList[i].id == data.product_id) {
          is_exist = true
          data.price = this.proList[i].price;
          data.title = this.proList[i].title;
        }
      }
      if (!is_exist) {
        data.price = '0.00';
        data.title = data.product_id;
      }
      this.calculateMoney();
    },
    // 产品添加
    tabelAdd() {
      this.form.details.push({
        delivery_date: "",
        product_id: "",
        title: "",
        price: "",
        year: "",
        nums: 1,
        tax: 1,
        tax_title: "10%",
        delivery_no: "",
        content: "",
      });
    },
    // 产品删除
    tableDel(index) {
      this.form.details.splice(index, 1);
    },
    // 交货单号点击
    deliveryNoClick(item, index) {
      this.delivery_no = item.delivery_no;
      this.detailIndex = index;
      this.dialogDeliveryNoVisible = true;
    },
    // 交货单号弹出确定
    dialogDeliveryNoClick() {
      this.form.details[this.detailIndex].delivery_no = this.delivery_no;
      this.dialogDeliveryNoVisible = false;
    },
    // 详细点击
    contentClick(item, index) {
      this.content = item.content;
      this.detailIndex = index;
      this.dialogContentVisible = true;
    },
    // 详细弹出确定
    dialogContentClick() {
      this.form.details[this.detailIndex].content = this.content;
      this.dialogContentVisible = false;
    },
    // 税率选择
    taxSelect(data, index) {
      let title = "";
      switch (data.tax) {
        case 1:
          title = "10%";
          break;
        case 2:
          title = "8%(軽減税率)";
          break;
        case 3:
          title = "8%";
          break;
        case 4:
          title = "5%";
          break;
        case 5:
          title = "免税";
          break;
        case 6:
          title = "非課税";
          break;
        case 7:
          title = "不課税";
          break;
      }
      data.tax_title = title;
    },
    // 计算金额
    calculateMoney() {
      var money = 0;
      var rate_money = 0;
      var all_money = 0;
      var tax = 0;
      for (var i in this.form.details) {
        if (this.form.details[i].tax == 1) {
          tax = 0.1;
        } else if (this.form.details[i].tax == 2) {
          tax = 0.08;
        } else if (this.form.details[i].tax == 3) {
          tax = 0.08;
        } else if (this.form.details[i].tax == 4) {
          tax = 0.05;
        }
        this.form.details[i].rate_money =
          (this.form.details[i].price * 100 * this.form.details[i].nums * tax) /
          100;
        this.form.details[i].money =
          (this.form.details[i].price * 100 * this.form.details[i].nums) / 100;
        money = money + this.form.details[i].money;
        rate_money = rate_money + this.form.details[i].rate_money;
        all_money =
          all_money +
          this.form.details[i].money +
          this.form.details[i].rate_money;
      }
      this.form.money = Math.round(money).toLocaleString();
      this.form.rate_money = Math.round(rate_money).toLocaleString();
      this.form.all_money = Math.round(all_money + (this.form.jz_money * 100) / 100).toLocaleString();
    },
    printClick() {
      this.loadingFlag = true;    // 动画加载事件
      // 调用htmlToPdf工具函数
      htmlToPdf.getPdf('文件标题', "#sheetDiv");
      // 定时器模拟按钮loading动画的时间
      setTimeout(() => {
        this.loadingFlag = false;
      }, 1000);
    },
    clientAdd() {
      this.client_open_add = true
    },
    closeDialogFunc(e, f) {
      if (f == "add") {
        this.client_open_add = e.openDialog;
        if (e.type == "success") {
          this.getClientList();
        }
      }
    },
  },
};
</script>

<style>
.title {
  font-size: 20px;
  margin-bottom: 10px;
}

.tag-btn {
  margin-bottom: 10px;
}

.lines {
  border-top: 1px solid #e6eaed;
  margin: 5px 0;
}

.product {
  margin-top: 10px;
}

.pro-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.table-add {
  padding-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

.main-left {
  width: 50%;
  border-right: 1px solid #e6eaed;
  padding-right: 10px;
}

.save-btn {
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.items {
  border-bottom: 1px solid #d4d8dd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.items-left {
  width: 30%;
  height: 42px;
  border-right: 1px solid #d4d8dd;
  display: flex;
  align-items: center;
}

.items-right {
  padding: 5px;
  width: 70%;
}

.main-right {
  padding-left: 10px;
  width: 49.9%;
}

.container___1Ytwi {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}

.thumbnailContainer {
  position: relative;
  flex: 0 0 140px;
  border: solid 4px transparent;
  margin: 9px 4px;
  cursor: pointer;
}

.active {
  border-color: #4a90e2;
}

.thumbnail___1Xmc4 {
  width: 169px;
  height: 216px;
}
</style>